<template>
   <!-- 数据展示模块 -->
   <div class="dz-list">
    <div class="class-wraps-cont">
      <!-- 左侧展示模块 一二级菜单 -->
      <div class="class-wraps-cont-left" id="leftMenu" :style="{height:scrollerHeight + 'px'}">
        <ul class="class-left-cont">
          <div v-for="(item,i) in dzData" :class="[item.class_id === activeId ? 'activeList':'']" >
            <div class="item"></div>
            <li class="class-left-cont-item" :class="[item.class_id === activeId ? 'active':'']" :key="item.class_id" @click="showTwoList(item,i)"><span>{{item.class_name}}</span></li>
            <div v-if="item.child" class="item-list-whole"  :class="[item.class_id === activeId && i==index ? '':'active-hide']" >
              <div v-for="(list,index) in item.child" :key="list.class_id" class="class-left-cont-item" :class="[list.class_id === activeTwoId ? 'active-two':'']" @click="twoListChange(list,index)"><span>{{list.class_name}}</span></div>
            </div>
          </div>
        </ul>
      </div>
      <!-- 右侧展示模块 -->
      <div class="class-wraps-cont-right" :style="{height:scrollerHeight + 'px'}">
      
        <!-- 三级分类 -->

          <div class="class-wraps-top" :class="threeData.length >0?'border':''">
            
            <!-- 分类商品加购展示 -->
              <div class="list-wrapper-app" id="scoll-app-top" :class="isShowDropBox?'hide':''">
                  <!-- 右侧分类轮播图 -->
                <wx-scroll-view :scroll-y="canScrollY" @scrolltolower="getData" @scroll="scrollTop" :enhanced="true" :style="{height:scrollerHeight + 'px'}">
                  <!-- 小程序端用swiper -->
                <wx-swiper class="my-swipe" v-if="swipeItem.length>0" :circular="true" :indicator-dots="true" indicator-color="#fff" indicator-active-color="#AD0D0F" :autoplay="1500">
                  <wx-swiper-item v-for="(image, index) in swipeItem" :key="index">
                    <img @click="linkTo(image.url)" :src="image.img" :data-src="image.img" class="swiper-img" />
                  </wx-swiper-item>
                </wx-swiper>
                <div class="class-wraps-top-dropboxs"  @click.stop="isDropBox" v-show="isShowDropBox && !isFixed && swipeItem.length>0"></div>
                
                  <div :class="isFixed && !isShowDropBox?'fixed-sticky':'fixed'" v-if="threeData.length > 0 ">
                    <div class="class-wraps-top-drop" :class="isFixed?'top-drop':''" @click="topDrop" v-if="threeData.length > 4 ">
                      <img :class="isShowDropBox?'drop':''" src="https://img.wifenxiao.com/h5-wfx/images/class_down.png" alt="向下箭头">
                    </div>
                    <ul class="class-wraps-top-cont" :style="{transform: transforms}" ref="classWrapNineDz" v-show="!isShowDropBox && threeData.length >0">
                      <li class="class-wraps-top-cont-item" :class="[item.class_id === classThreeId ? 'active':'']" v-for="item in threeData" :key="item.class_id" @click="threeChange(item,index)"><span>{{item.class_name}}</span></li>
                    </ul>
                    <div class="sticky-div" :class="isFixed?'div-hide':''"></div>
                  

                  <div class="class-wraps-top-dropbox" :class="swipeItem.length>0 && !isFixed?'show-bottom':''" id="class-wrap-top-dropbox" @click.stop="isDropBox" v-show="isShowDropBox">
                     <div class="class-wraps-top-drop" :class="isFixed && isShowDropBox?'top-show':''" @click="topDrop" v-if="threeData.length > 4 ">
                      <img :class="isShowDropBox?'drop':''" src="https://img.wifenxiao.com/h5-wfx/images/class_down.png" alt="向下箭头">
                    </div>
                    <ul class="class-wraps-top-cont other"  ref="classWrapNine" v-show="isShowDropBox && threeData.length >0">
                      <li class="class-wraps-top-cont-item" ><div>选择分类</div></li>
                    </ul>
                    <ul class="class-wraps-top-dropcont">
                      <li class="class-wraps-top-dropcont-item" :class="[item.class_id === classThreeId ? 'active':'']" v-for="(item,index) in threeData" :key="item.class_id"  @click="threeChange(item,index)">{{item.class_name}}</li>
                    </ul>
                  </div>
                  </div>
                  <div :class="threeData.length>0?'top-nav':''">
                    <item-wrapper :dhsOriginalPriceShow="dhsOriginalPriceShow" :itemList="goodList" :listStyle="true" :otherInfo="otherInfo" :vanList="vanList" :isShowNoData="isShowNoData" @scrollReachBottom="getData" :dzNew='dzNew' :classGoodMini="true"></item-wrapper>
                  </div>
                </wx-scroll-view>
              </div>
          </div>


      </div>
    </div>
    </div>
</template>
<script>
import { getClassItem } from '@/api/item/item.js'
import skuDialog from '../../components/skuDialog'
import itemWrapper from '../../itemList/listWrapper/itemWrapper'
import noData from '@/components/noData/index'
import { openPage } from '@/utils/utils'
import Vue from 'vue'
import { Swipe, SwipeItem, Sticky } from 'vant'
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Sticky)
export default Vue.extend({
  components: {
    skuDialog,
    itemWrapper,
    noData
  },
  props: {
    dzData: {
      type: Array,
      default: []
    },
    scrollerHeight: {
      type: Number,
      default: window.innerHeight
    },
    searchOffsetHeight: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeId: '', // 一级 class_id
      activeTwoId: '', // 二级 class_id
      classThreeId: '', // 三级 class_id
      threeData: [], // 三级 数据
      index: -1, // 一级 index
      isShowDropBox: false, // 三级菜单下拉
      swipeItem: [], // 轮播图
      canScrollY: true, // 是否允许小程序y轴滚动
      params: {
        p: 1,
        class_id: ''
      },
      goodList: [],
      otherInfo: {
        earn_alias: '',
        is_open_kuajing: '',
        is_display_original_price: '',
        point_name: ''
      },
      vanList: {
        loading: false,
        error: false,
        finished: false
      },
      dhsOriginalPriceShow: '', // 是否展示原价
      isShowNoData: false,
      offestWidth: 0,
      transforms: '', // translate(0rem, 0px) scale(1) translateZ(0px)
      isFixed: false,
      dzNew: true,
      twoItem: [],
      nowI: -1
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const queryClassId = this.$route.query.class_id
      if (queryClassId) {
        this.params.class_id = queryClassId
        this.params.p = 1
        this.getItemListFun(false)
        if (this.dzData.filter(item => item.class_id == queryClassId)[0]) {
          const oneList = this.dzData.filter(item => item.class_id == queryClassId)[0]
          this.activeId = oneList.class_id
          this.threeData = oneList.child && oneList.child[0].child ? oneList.child[0].child : []
          this.swipeItem = oneList.swipeItem || []
          this.twoItem = undefined
          let nowI = -1
          this.dzData.filter(function(item, k) {
            if (item.class_id == queryClassId) {
              nowI = k
            }
          })
          this.nowI = nowI
        } else {
          for (const i in this.dzData) {
            if (this.dzData[i].child) {
              this.dzData[i].child.filter(item => item.class_id == queryClassId)
              if (this.dzData[i].child.filter(item => item.class_id == queryClassId)[0]) {
                const twoList = this.dzData[i].child.filter(item => item.class_id == queryClassId)[0]
                this.activeId = this.dzData[i].class_id
                this.activeTwoId = twoList.class_id || ''
                this.threeData = twoList.child || []
                this.index = i
                this.swipeItem = twoList.swipeItem || this.dzData[i].swipeItem || []
                this.twoItem = twoList.swipeItem
                return true
              } else {
                for (const k in this.dzData[i].child) {
                  if (this.dzData[i].child[k].child) {
                    if (this.dzData[i].child[k].child.filter(item => item.class_id == queryClassId)[0]) {
                      const threeList = this.dzData[i].child[k].child.filter(item => item.class_id == queryClassId)[0]
                      this.activeId = this.dzData[i].class_id
                      this.activeTwoId = this.dzData[i].child[k].class_id || ''
                      this.classThreeId = threeList.class_id
                      this.threeData = this.dzData[i].child[k].child || []
                      this.index = i
                      this.swipeItem = threeList.swipeItem || this.dzData[i].child[k].swipeItem || this.dzData[i].swipeItem || []
                      this.twoItem = this.dzData[i].child[k].swipeItem
                    }
                  }
                }
              }
            }
          }
        }
      } else {
        this.activeId = this.dzData[0].class_id
        this.activeTwoId = this.dzData[0].child ? this.dzData[0].child[0].class_id : ''
        this.classThreeId = this.dzData[0].child && this.dzData[0].child[0].child ? this.dzData[0].child[0].child[0].class_id : ''
        this.threeData = this.dzData[0].child && this.dzData[0].child[0].child ? this.dzData[0].child[0].child : []
        this.index = 0
        this.params.p = 1
        if (this.classThreeId) {
          this.params.class_id = this.classThreeId
          this.swipeItem = this.threeData[0].swipeItem
          if (!this.swipeItem) {
            if (this.activeTwoId) {
              this.swipeItem = this.dzData[0].child[0].swipeItem
              this.twoItem = this.dzData[0].child[0].swipeItem
              if (!this.swipeItem) {
                this.swipeItem = this.dzData[0].swipeItem || []
              }
            }
          }
        } else if (this.activeTwoId) {
          this.params.class_id = this.activeTwoId
          this.swipeItem = this.dzData[0].child[0].swipeItem
          this.twoItem = this.dzData[0].child[0].swipeItem
          if (!this.swipeItem) {
            this.swipeItem = this.dzData[0].swipeItem || []
          }
        } else {
          this.params.class_id = this.activeId
          this.swipeItem = this.dzData[0].swipeItem || []
        }
        this.getItemListFun(false)
      }
      this.offestWidth = window.innerWidth - (window.innerWidth * 0.25) - 35
    },
    showTwoList(id, index) {
      this.isFixed = false
      this.isShowDropBox = false
      if (index == this.index) {
        this.index = -1
      } else if (index != this.index) {
        this.index = index
      }
      if (id.class_id != this.activeId) {
        this.goodList = []
        this.params.p = 1
        this.activeId = id.class_id
        this.activeTwoId = id.child ? id.child[0].class_id : ''
        this.classThreeId = this.activeTwoId && id.child[0].child ? id.child[0].child[0].class_id : ''
        this.threeData = this.activeTwoId && id.child[0].child ? id.child[0].child : []
        this.params.class_id = this.classThreeId || this.activeTwoId || this.activeId || ''
        if (this.threeData.length > 0) {
          this.swipeItem = this.threeData[0].swipeItem
          if (!this.swipeItem) {
            if (id.child) {
              this.swipeItem = id.child[0].swipeItem || id.swipeItem
              this.twoItem = id.child[0].swipeItem
              if (!this.swipeItem) {
                this.swipeItem = id.swipeItem || []
              }
            }
          }
        } else {
          if (id.child) {
            this.swipeItem = id.child[0].swipeItem || id.swipeItem
            if (!this.swipeItem) {
              this.swipeItem = id.swipeItem || []
            } else {
              this.twoItem = id.child[0].swipeItem
            }
          } else {
            this.swipeItem = id.swipeItem || []
          }
        }
        this.getItemListFun(false)
      }
    },
    threeChange(id, index) {
      this.isFixed = false
      this.isShowDropBox = false
      this.params.p = 1
      this.classThreeId = id.class_id
      this.params.class_id = this.classThreeId
      this.img = this.threeData.filter(item => item.class_id == id.class_id)[0].swipeItem
      const pid = this.threeData.filter(item => item.class_id == id.class_id)[0].parent_id
      if (!this.activeTwoId) {
        this.twoItem = this.dzData[this.nowI].child.filter(item => item.class_id == pid)[0].swipeItem
      }
      if (this.index < 0) {
        this.swipeItem = this.img || this.twoItem || this.dzData[this.nowI].swipeItem || []
      } else {
        this.swipeItem = this.img || this.twoItem || this.dzData[this.index].swipeItem || []
      }
      this.isShowDropBox = false
      this.getItemListFun(false)
    },
    twoListChange(id, index) {
      this.isShowDropBox = false
      this.activeTwoId = id.class_id
      this.classThreeId = this.dzData[this.index].child[index].child ? this.dzData[this.index].child[index].child[0].class_id : ''
      this.threeData = this.dzData[this.index].child[index].child || []
      this.params.class_id = this.classThreeId || this.activeTwoId || this.activeId || ''
      if (this.threeData && this.threeData.length > 0) {
        this.swipeItem = this.threeData[0].swipeItem
        if (!this.swipeItem) {
          this.swipeItem = id.swipeItem || this.dzData[this.index].swipeItem || []
          this.twoItem = id.swipeItem
        }
      } else {
        this.swipeItem = id.swipeItem || this.dzData[this.index].swipeItem || []
        this.twoItem = id.swipeItem
      }
      this.params.p = 1
      this.getItemListFun(false)
    },
    topDrop() {
      this.isShowDropBox = !this.isShowDropBox
      if (this.isShowDropBox) {
        this.canScrollY = false
      } else {
        this.canScrollY = true
      }
      setTimeout(() => {
        if (this.isShowDropBox) {
          document.getElementById('class-wrap-top-dropbox').style.display = 'block'
        } else {
          document.getElementById('class-wrap-top-dropbox').style.display = 'none'
        }
      }, 50)
    },
    isDropBox() {
      this.isShowDropBox = false
      if (this.isShowDropBox) {
        this.canScrollY = false
      } else {
        this.canScrollY = true
      }
    },
    /**
     * 获取商品列表数据
     */
    getItemListFun(onload) {
      if (onload == false) {
        this.params.p = 1
        this.goodList = []
        this.finished = false
        this.loading = false
      }
      if (this.params.p == 1) {
        this.vanList.finished = false
        this.vanList.loading = false
        this.vanList.error = false
        this.loading = false
      }
      this.$loadingWrap.show()
      getClassItem(this.params).then(res => {
        this.$loadingWrap.close()
        if (res.status === 1) {
          const resData = res.data.data.lists
          if (resData.length <= 0) {
            this.vanList.finished = true
          }
          resData.forEach(item => {
            if (item.is_compress == 1) {
              item.src = `${item.pic_url}w640`
            } else {
              item.src = item.pic_url
            }
          })
          if (res.data) {
            if (this.params.p == 1) {
              this.vanList.loading = false
              const otherInfo = {
                'earn_alias': res.data.data.earn_alias,
                'is_open_kuajing': res.data.data.is_open_kuajing,
                'is_display_original_price': res.data.data.is_display_original_price,
                'point_name': res.data.data.point_name
              }
              this.otherInfo = otherInfo
              this.goodList = resData
              if (this.goodList.length == 0) {
                this.isShowNoData = true
              } else {
                this.isShowNoData = false
              }
            } else {
              this.vanList.loading = false
              this.goodList = this.goodList.concat(resData)
            }
          }
          this.dhsOriginalPriceShow = String(res.data.dhs_original_price_class_display)
        } else {
          this.$Error(res.msg)
        }
      })
    },

    /**
     * 滑到底部加载
     */
    getData() {
      this.params.p++
      this.getItemListFun(true)
    },
    scrollTop(event) {
      if (this.swipeItem.length>0) {
        if (event.detail.scrollTop >= 212) {
          this.isFixed = true
        } else {
          this.isFixed = false
        }
      } else {
        if (event.detail.scrollTop < 5) {
          this.isFixed = false
        } else {
          this.isFixed = true
        }
      }
    },
    linkTo(url) {
      // TODO 小程序跳转处理
      openPage(url)
    },
    transform(index) {
      const is_identity_num = this.threeData.length
      let transformX = 0
      if (index > 3) {
        transformX = ((is_identity_num - 4) * 175 + 20) / 75
      }
      this.transforms = 'translate(-' + transformX + 'rem, 0px) scale(1) translateZ(0px)'
    }
  }
})
</script>
<style lang="scss">
  @import "src/styles/mixin";
  .class-wraps {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    box-sizing: border-box;
    padding-top: 116px;
     &-top{
      top: 0;
      left: 0;
      right: 0;
      max-width: 750px;
      width: 100%;
      padding-bottom: 15px;
      margin: 0 auto;
      background-color: #fff;
      &-drop{
        position: absolute;
        right: 0;
        top: 4px;
        width: 72px;
        height: 72px;
        line-height: 72px;
        text-align: center;
        background-color: #fff;
        z-index: 90;
        &::before{
          position: absolute;
          right: 72px;
          top: 50%;
          content: '';
          width: 39px;
          height: 72px;
          z-index: 101;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          transform: translateY(-50%);
        }
        >img{
          display: inline-block;
          width: 20px;
          vertical-align: middle;
          &.drop{
            transform:rotate(180deg);
            -ms-transform:rotate(180deg);
            -moz-transform:rotate(180deg);
            -webkit-transform:rotate(180deg);
            -o-transform:rotate(180deg);
          }
        }
      }
      &-dropbox{
        display: none;
        position: fixed;
        top: 200px;
        left: 25%;
        right: 0;
        width: 75%;
        height: 100%;
        max-width: 750px;
        background-color: rgba(0,0,0,.5);
        z-index: 9;
        &.show-bottom {
          position: absolute;
          top: 95px;
          left: 0;
          right: 0;
          width: 100%;
          height: 100%;
          max-width: 750px;
          background-color: rgba(0,0,0,.5);
          z-index: 9;
        }
        .class-wraps-top-dropcont{
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          align-items: center;
          flex-wrap: wrap;
          width: 100%;
          max-height: 200px;
          overflow: auto;
          padding: 30px;
          background-color: #fff;
          z-index: 101;
          border-top: 1px solid rgba(231,231,231,.5);
          &-item{
            font-size: 26px;
            width: auto;
            height: 62px;
            line-height: 62px;
            text-align: center;
            margin-right: 25px;
            margin-bottom: 25px;
            background: rgba(153,153,153,.1);
            padding: 0px 14px;
            color: #666;
            border-radius: 2px;
            &.active{
              background:rgba(194,63,59,.05);
              color: #AD0D0F;
              border-radius: 6px;
            }
            &:nth-child(3n){
              // margin-right: 0;
            }
          }
        }
      }
      &-cont{
        position: relative;
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        align-items: center;
        height: 72px;
        overflow-x: scroll;
        background-color: #fff;
        z-index: 90;
        padding-left: 18px;
        margin-top: 20px;
        margin-right: 72px;
        &-item{
          -webkit-box-flex: 1;
          -webkit-flex: 1 0 auto;
          flex: 0 0 auto;
          font-size: 26px;
          color:#333;
          line-height: 72px;
          padding-right: 20px;
          >span{
            position: relative;
            display: inline-block;
            background: rgba(153,153,153,.1);
            padding: 0px 14px;
            color: #666;
            border-radius: 2px;
          }
          &.active {
            >span{
              background:rgba(237,99,99,.05);
              color: #AD0D0F;
              border-radius: 6px;
            }
          }
        }
      }
    }
    &-cont {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
      &.classType_nine{
        padding-top: 89px;
        box-sizing: border-box;
        .class-wraps-cont-right{
          overflow-y: visible;
        }
      }
      &-left {
          width: 25%;
          height: auto;
          overflow-y: scroll;
          .class-left-cont {
            height:100%;
            width: 95%;
            &-item {
              cursor: pointer;
              position: relative;
              width: 100%;
              height: 96px;
              line-height: 96px;
              text-align: center;
              font-size: 26px;
              color: #666;
              background-color: #f5f5f5;
              border-bottom: 1px solid #fff;
              >span{
                display: block;
                line-height: 96px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
                color: #999;
                font-size: 24px;
              }
              &.active {
                background-color: #fff;
                font-weight: bold;
                width:98%;
                >span{
                  color: #333;
                  font-size: 28px;
                }
              }
              &.active-two {
                background-color: #fff;
                font-size: 20px;
                >span{
                  color: #AD0D0F;
                }
              }
              &.active-two::before {
                position: absolute;
                top: 50%;
                left: 0px;
                transform: translate(0, -50%);
                content: '';
                width:6px;
                height:28px;
                background: #AD0D0F;
                border-radius: 4px;
              }
            }
          }
      }
      &-right {
        border-top: 1px solid #ededed;
        position: relative;
          width: 75%;
          height: auto;
          overflow-y: scroll;
          .list-wrapper-app{
            position: absolute;
            overflow-y: scroll;
            width: 100%;
            height: calc(100% - 20px);
            &.app-top {
              margin-top: 20px;
            }
          }
      }
    }
  }
.active-hide{
  display:none
}
.item-list-whole{
  background: #fff;
  width: 98%;
  .class-left-cont-item {
    background-color: #fff!important
  }
}
.border{
  ::after {
    border-bottom: 1px solid #ededed;
  }
}
.my-swipe{
  margin: 18px;
  border-radius: 2px;
    .swiper-img {
      width: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
}
 .van-sticky--fixed {
    left: 25%;
}

.activeList {
  width: 106%;
  position: relative;
  border-radius: 10px;
  border-bottom: 2px solid rgba(219, 214, 214, 0.6);
  border-right: 2px solid rgba(219, 214, 214, 0.6);
  border-radius-bottom-left: 0;
  border-bottom-left-radius: 0;
  overflow: hidden;
  .item {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 2px;
    top: 0;
    background: #e1dfdf;
    filter: blur(20px);
  }
}
.fixed-sticky{
  border-top: 1px solid #ededed;
	background: #fff;
  box-shadow: 10px 10px 10px rgba(219,214,214,.6);
  padding-bottom: 10px;
  position: fixed;
  left: 25%;
  top: 100px;
  z-index: 99;
  right:0;
}
.fixed{
  position: relative;
  .sticky-div {
    position: absolute;
    height: 40px;
    left: 0;
    right: 0;
    background: url(https://img.wifenxiao.com/h5-wfx/images/DZ/xfl/jx.png) 100% 100%;
    z-index: 9;
    &.div-hide{
      bottom: 0;
      z-index: -1
    }
  }
}
.hide{
  overflow: hidden!important;
}
.other {
  top: -90px;
  z-index: 99;
  margin-top: 0;
  height: 90px;
  margin-right: 0;
}
.top-drop {
  top: 26px
}
.class-wraps-top-dropboxs{
  position: absolute;
  top: 400px;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
}
.top-show{
  top: -90px;
  z-index:999
}
.top-nav {
  margin-top: 10px
}

</style>